<template>
  <div class="rate-content">
    <titleHead :title="'资源池利用率及分配率'" />
    <title2 :title="'利用率'" />
    <el-col :span="24">
      <el-col v-for="item in 3" :key="item" :span="8" style="height: 22rem">
        <radioText :cockpitData="dataArray[item - 1]" />
      </el-col>
    </el-col>
    <title2 :title="'近12个月使用率月均趋势'" />
    <el-col :span="24">
     
      <onlyLine :height="'20rem'" :lineData="lineData" />
    </el-col>
  </div>
</template>

<script>
//import RadioText from '../radioText.vue';
//import CenterChart from '@/components/echart/center/centerChartRate'
//import centerRight2Chart1 from "@/components/echart/centerRight/centerRightChart";

export default {
  data() {
    return {
      dataArray: [],
      lineData: {},
      category: [
        "甘州区",
        "民乐县",
        "临泽县",
        "高台县",
        "山丹县",
        "肃南裕固族自治县",
      ],
      // lineData: [[18092, 20728, 24045, 28348, 32808, 30808],[9989, 20222, 13231, 28348, 32808, 12808],[18092, 22728, 14045, 21348, 32808, 22808]],
    };
  },
  mounted() {
    this.getInfor();
  },
  methods: {
    getInfor() {
      this.getInfo({ key: "8-2-1" }).then((res) => {
        const data = res.cockpitData.map((e) => {
          this.dataArray.push(e);
        });
      });
      this.getInfo({ key: "8-2-2" }).then((res) => {
        const CPUlineData = [];
        const StoragelineData = [];
        const storageModellineData = [];
        const category = [];
        const data = res.cockpitData.map((e) => {
          
          if ((e.type == "CPU")) {
            CPUlineData.push(parseInt(e.measure));
            category.push(e.dimension);
          }
          if ((e.type == "储存规模")) {
            storageModellineData.push(parseInt(e.measure));
          }
          if ((e.type == "内存")) {
            StoragelineData.push(parseInt(e.measure));
          }
        });
        this.lineData.category = ["CPU", "储存规模", "内存"];
        
        this.lineData.lineData = [
          CPUlineData,
          storageModellineData,
          StoragelineData,
        ];
        this.lineData.linecolor= ["#16A5FF", "#FFB37B", "#7CCF72"]
        this.lineData.height= "20rem"
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#center {
  display: flex;
  flex-direction: column;
  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      border-radius: 6px;
      padding-top: 8px;
      margin-top: 8px;
      width: 32%;
      height: 70px;
      .dv-dig-flop {
        width: 150px;
        height: 30px;
      }
    }
  }
  .down {
    padding: 6px 4px;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    height: 255px;
    justify-content: space-between;
    .bg-color-black {
      border-radius: 5px;
    }
    .ranking {
      width: 59%;
      .dv-scr-rank-board {
        height: 225px;
      }
    }
    .percent {
      width: 40%;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 50%;
        height: 120px;
        span {
          margin-top: 8px;
          font-size: 14px;
          display: flex;
          justify-content: center;
        }
      }
      .water {
        width: 100%;
        .dv-wa-le-po {
          height: 120px;
        }
      }
    }
  }
}
</style>
